<!DOCTYPE html>
<html>
<head>
<title>MWIvn Demo 2015</title>
 <style type="text/css">
	 * {
		font-family: Times New Roman;
		font-size: 12pt;
	 }
	 
	 html, body, #page {
		margin: 0;
		padding: 0;}
	 
	 #page {
		background-color: Snow;
		overflow: auto;
		width: 100%;
	 }
	 
	 #sidebar {
		padding: 0;
		font-size: 10pt;
		float: left;
		width: 13.7%;
		margin-left: 0.1%;
		margin-right: 0.1%;
		}
		
	#sidebar > div {
		background-color: LightGray;
		padding: 1%;
		margin: 0;
	}
	
	#ModuleFlood ModuleRice, #ModuleStations, #ModuleSalinityIntrusion,# ModuleSeaLevelRiveScenarios {}
		
	#gmap { 
		float: right;
		width: 86%;
		margin-right: 0.1%;
	}
	
	#title {
		margin-left: 6px;
		margin-top: 6px;
		width: 30%;
		height: 40px;
		background: Snow;
		padding-left: 4px;}

	#map-canvas {
		margin-top: 1px;
	}
	
	#datebox {
		font-size: 14pt;
		color: darkred;
		margin: 0;
	}
	
	#modulebox {
		color: blue;
		margin: 0;
	}
	
	select {
		margin-left: 6px;
		margin-bottom: 6px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		background: Snow;
		-webkit-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
		-moz-box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
		box-shadow: 0 1px 0 #ccc, 0 -1px #fff inset;
	}
	
	input {
		margin-left: 6px;
		margin-bottom: 6px;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
		background: Snow;
	}
	
	b {
		color: Crimson;
	}
	
	hr {
		margin: 4px 10px 4px 0px;
	}
	
	#sidebar .ui-accordion-header {
		background-color: Lavender;
		font-weight: bold;
		font-size: 11pt;
		margin: 0;
		padding: 2px 0px 2px 10px;
		color: RoyalBlue;
		font-family: Arial;
		border: 1px solid;
	}
	
 </style>
 <link rel="stylesheet" href="js/jquery-ui.min.css">
 <script type="text/javascript"
   src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5VkARHqQvkB0ycqAPsOL4kS6iPHzsRMM">
 </script>
 <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui.min.js"></script>
 <!-- <script type="text/javascript" src="js/knockout-3.2.0.js"></script> -->
 <script type= "text/javascript" src="js/GmapDemo.js"></script>
</head>
<body>
<div id="page">
	<div id="sidebar">
		<!-- Flood Module -->
		<h1>FLOOD</h1>
		<div id="Flood">
			<B>Overlay Image</B><br/>
			<INPUT class="onofflayer" type="button" value="On/Off" title="Overlay satellite image"></INPUT><br/>
			<B>Year</B><br/>
			<SELECT size="5" id="FloodYear"><br/>
				 <option VALUE=2000>2000</option>
				 <option VALUE=2011>2011</option>
				 <option VALUE=2014>2014</option>
			</SELECT></br>
			
			<B>DOY (No data)</B><br/>
			<SELECT size="10" id="FloodDOY">
				 <option VALUE="001" >001 (Jan.1-Jan.8)</option>
				 <option VALUE="009">009 (Jan.9-Jan.16)</option>
				 <option VALUE="017">017 (Jan.17-Jan.24)</option>
				 <option VALUE="025">025 (Jan.25-Feb.1)</option>
				 <option VALUE="033">033 (Feb.2-Feb.9)</option>
				 <option VALUE="041">041 (Feb.10-Feb.17)</option>
				 <option VALUE="049">049 (Feb.18-Feb.25)</option>
				 <option VALUE="057">057 (Feb.26-Mar.5)</option>
				 <option VALUE="065">065 (Mar.6-Mar.13)</option>
				 <option VALUE="073">073 (Mar.14-Mar.21)</option>
				 <option VALUE="081">081 (Mar.22-Mar.29)</option>
				 <option VALUE="089">089 (Mar.30-Apr.6)</option>
				 <option VALUE="097">097 (Apr.7-Apr.14)</option>
				 <option VALUE="105">105 (Apr.15-Apr.22)</option>
				 <option VALUE="113">113 (Apr.23-Apr.30)</option>
				 <option VALUE="121">121 (May.1-May.8)</option>
				 <option VALUE="129">129 (May.9-May.16)</option>
				 <option VALUE="137">137 (May.17-May.24)</option>
				 <option VALUE="145">145 (May.25-Jun.1)</option>
				 <option VALUE="153">153 (Jun.2-Jun.9)</option>
				 <option VALUE="161">161 (Jun.10-Jun.17)</option>
				 <option VALUE="169">169 (Jun.18-Jun.25)</option>
				 <option VALUE="177">177 (Jun.26-Jul.3)</option>
				 <option VALUE="185">185 (Jul.4-Jul.11)</option>
				 <option VALUE="193">193 (Jul.12-Jul.19)</option>
				 <option VALUE="201">201 (Jul.20-Jul.27)</option>
				 <option VALUE="209">209 (Jul.28-Aug.4)</option>
				 <option VALUE="217">217 (Aug.5-Aug.12)</option>
				 <option VALUE="225">225 (Aug.13-Aug.20)</option>
				 <option VALUE="233">233 (Aug.21-Aug.28)</option>
				 <option VALUE="241">241 (Aug.29-Sep.5)</option>
				 <option VALUE="249">249 (Sep.6-Sep.13)</option>
				 <option VALUE="257">257 (Sep.14-Sep.21)</option>
				 <option VALUE="265">265 (Sep.22-Sep.29)</option>
				 <option VALUE="273">273 (Sep.30-Oct.7)</option>
				 <option VALUE="281">281 (Oct.8-Oct.15)</option>
				 <option VALUE="289">289 (Oct.16-Oct.23)</option>
				 <option VALUE="297">297 (Oct.24-Oct.31)</option>
				 <option VALUE="305">305 (Nov.1-Nov.8)</option>
				 <option VALUE="313">313 (Nov.9-Nov.16)</option>
				 <option VALUE="321">321 (Nov.17-Nov.24)</option>
				 <option VALUE="329">329 (Nov.25-Dec.2)</option>
				 <option VALUE="337">337 (Dec.3-Dec.10)</option>
				 <option VALUE="345">345 (Dec.11-Dec.18)</option>
				 <option VALUE="353">353 (Dec.19-Dec.26)</option>
				 <option VALUE="361">361 (Dec.27-Jan.3)</option>
			</SELECT>
			<br/>
		</div>
		<!-- Land Use Module -->
		<h1>LAND USE</h1>
		<div id="Landuse">
			<B>Overlay Image</B><br/>
			<INPUT class="onofflayer" type="button" value="On/Off" title="Overlay satellite image"></INPUT><br/>
			<B>Year</B><br/>
			<SELECT size="5" id="LanduseYear"">
				 <option VALUE=2013>2013</option>
				 <option VALUE=2014>2014</option>
			</SELECT>
		</div>
		<!-- Stations Module -->
		<h1>STATIONS</h1>
		<div id="Stations">
			<B>Overlay Image</B><br/>
			<INPUT class="button" type="button" id="StationsShowAll" value="Show All" title="Hydrological Stations"></INPUT><br/>
		</div>
		<!-- digital elevation map Module -->
		<h1>DIGITAL ELEVATION</h1>
		<div id="DigitalElevation">
			<B>Overlay Image</B><br/>
			<INPUT class="onofflayer" type="button" value="On/Off" title="Overlay satellite image"></INPUT><br/>
			<B>Year</B><br/>
			<SELECT size="5" id="DEMYear"">
				 <option VALUE=2009>2009</option>
			</SELECT>
		</div>
		<!-- Salinity Intrusion Module -->
		<h1>SALINITY INTRUSION</h1>
		<div id="SalinityIntrusion">
			No data
		</div>
		<!-- Sea Level Rive Scenarios Module -->
		<h1>SEA LEVEL RIVE SCENARIOS</h1>
		<div id="SeaLevelRiveScenarios">
			No data
		</div>

	</div>
	<!-- Google Map Module-->
	<div id="gmap">
		<div id="map-canvas"></div>
	</div>
</div>
</body>
</html>